<template>
  <div class="page-header-index-wide index-page">
    <IndexHeader title="正大食品能源监测平台"></IndexHeader>
    <div class="current-date">
      <div class="current-date-icon"></div>
      {{ currentDate }}
    </div>
    <!-- 头部水、电、燃气、蒸汽汇总及分析 -->
    <a-row :gutter="24">
      <!-- 水汇总及分析 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="index-top-item red">
          <div class="item-top">
            <div class="item-top-eve">
              <p class="item-top-title">累计水费(元)</p>
              <p class="item-top-num">
                <span class="num">{{sNum.cumulativeCost}}</span>
                <span class="pre">{{sNum.cumulativeCostPerc}}</span>
                <!-- 趋势字段：sNum.state -->
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">累计用水(m³)</p>
              <p class="item-top-num">
                <span class="num">{{sNum.cumulativeWater}}</span>
                <span class="pre">{{sNum.cumulativeWaterPerc}}</span>
                <!-- 趋势字段：sNum.state -->
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">屠宰数量(只)</p>
              <p class="item-top-num">
                <span class="num">{{sNum.slaughterNum}}</span>
                <span class="pre">{{sNum.slaughterNumPerc}}</span>
                <!-- 趋势字段：sNum.state -->
                <span class="qushi"></span>
              </p>
            </div>
          </div>
          <div class="item-bottom">
            <LineEchart eId="shui" color="#fb6260" :dataSource="sDataSource"></LineEchart>
          </div>
        </div>
      </a-col>
      <!-- 电汇总及分析 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="index-top-item blue">
          <div class="item-top">
            <div class="item-top-eve">
              <p class="item-top-title">累计电费(元)</p>
              <p class="item-top-num">
                <span class="num">{{dNum.cumulativeCost}}</span>
                <span class="pre">{{dNum.cumulativeCostPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">累计用电(千瓦)</p>
              <p class="item-top-num">
                <span class="num">{{dNum.cumulativeWater}}</span>
                <span class="pre">{{dNum.cumulativeWaterPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">屠宰数量(只)</p>
              <p class="item-top-num">
                <span class="num">{{dNum.slaughterNum}}</span>
                <span class="pre">{{dNum.slaughterNumPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
          </div>
          <div class="item-bottom">
            <LineEchart eId="dian" echatsType="bar" color="#0099ff" :dataSource="dDataSource"></LineEchart>
          </div>
        </div>
      </a-col>
      <!-- 燃气汇总及分析 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="index-top-item green">
          <div class="item-top">
            <div class="item-top-eve">
              <p class="item-top-title">累计燃气费(元)</p>
              <p class="item-top-num">
                <span class="num">{{rqNum.cumulativeCost}}</span>
                <span class="pre">{{rqNum.cumulativeCostPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">累计用燃气(m³)</p>
              <p class="item-top-num">
                <span class="num">{{rqNum.cumulativeWater}}</span>
                <span class="pre">{{rqNum.cumulativeWaterPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">屠宰数量(只)</p>
              <p class="item-top-num">
                <span class="num">{{rqNum.slaughterNum}}</span>
                <span class="pre">{{rqNum.slaughterNumPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
          </div>
          <div class="item-bottom">
            <LineEchart eId="ranqi" color="#51d351" :dataSource="rqDataSource"></LineEchart>
          </div>
        </div>
      </a-col>
      <!-- 蒸汽汇总及分析 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="index-top-item purple">
          <div class="item-top">
            <div class="item-top-eve">
              <p class="item-top-title">累计蒸汽费(元)</p>
              <p class="item-top-num">
                <span class="num">{{zqNum.cumulativeCost}}</span>
                <span class="pre">{{zqNum.cumulativeCostPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">累计用蒸汽(m³)</p>
              <p class="item-top-num">
                <span class="num">{{zqNum.cumulativeWater}}</span>
                <span class="pre">{{zqNum.cumulativeWaterPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
            <div class="item-top-eve">
              <p class="item-top-title">屠宰数量(只)</p>
              <p class="item-top-num">
                <span class="num">{{zqNum.slaughterNum}}</span>
                <span class="pre">{{zqNum.slaughterNumPerc}}</span>
                <span class="qushi"></span>
              </p>
            </div>
          </div>
          <div class="item-bottom">
            <LineEchart eId="zhengqi" color="#8167f5" :dataSource="zqDataSource"></LineEchart>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24" class="index-content">
      <!-- 年度能耗曲线分析图 -->
      <a-col :md="24" :xl="12">
        <div class="index-content-left">
          <div class="content-left-title">
            <div class="left-title-icon"></div>年度能耗分析曲线图
          </div>
          <div style="height: 426px">
            <LineEchartxy :dataSource="YearEnergyObj"></LineEchartxy>
          </div>
          <div class="content-left-search">
            <a-select
              v-model="searchObj.type"
              size="small"
              class="code-mode-select"
              @change="loadYearEnergyConsumption"
            >
              <a-select-option value="S">水</a-select-option>
              <a-select-option value="DB">电</a-select-option>
              <a-select-option value="RQ">然气</a-select-option>
              <a-select-option value="ZQ">蒸汽</a-select-option>
            </a-select>
            <a-date-picker
              mode="year"
              placeholder="请选择年份"
              format="YYYY"
              v-model="searchObj.year"
              style="width: 100%"
              :open="yearShowOne"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"
            />
          </div>
        </div>
      </a-col>
      <!-- 下部右侧水、电、蒸汽、燃气能源分析 -->
      <a-col :md="24" :xl="12">
        <div class="index-content-right">
          <a-row :gutter="24">
            <!-- 电 -->
            <a-col :md="24" :xl="12">
              <div class="content-right-item">
                <div class="left-top"></div>
                <div class="left-bottom"></div>
                <div class="right-top"></div>
                <div class="right-bottom"></div>
                <div class="right-item-title">电能源分析</div>
                <div class="right-item-content">
                  <BarEchart eId="dian1" :dataSource="dAnalysis"></BarEchart>
                </div>
              </div>
            </a-col>
            <!-- 蒸汽 -->
            <a-col :md="24" :xl="12">
              <div class="content-right-item">
                <div class="left-top"></div>
                <div class="left-bottom"></div>
                <div class="right-top"></div>
                <div class="right-bottom"></div>
                <div class="right-item-title">蒸汽能源分析</div>
                <div class="right-item-content">
                  <CircleEchart eId="zhengqi1" :dataSource="zqAnalysis"></CircleEchart>
                </div>
              </div>
            </a-col>
            <!-- 燃气 -->
            <a-col :md="24" :xl="12">
              <div class="content-right-item">
                <div class="left-top"></div>
                <div class="left-bottom"></div>
                <div class="right-top"></div>
                <div class="right-bottom"></div>
                <div class="right-item-title">燃气能源分析</div>
                <div class="right-item-content">
                  <PieEchart eId="ranqi1" :dataSource="rqAnalysis"></PieEchart>
                </div>
              </div>
            </a-col>
            <!-- 水 -->
            <a-col :md="24" :xl="12">
              <div class="content-right-item">
                <div class="left-top"></div>
                <div class="left-bottom"></div>
                <div class="right-top"></div>
                <div class="right-bottom"></div>
                <div class="right-item-title">水能源分析</div>
                <div class="right-item-content">
                  <BarEchart eId="shui1" :dataSource="sAnalysis"></BarEchart>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import LineEchart from '@/components/chart/LineEchart'
import LineEchartxy from '@/components/chart/LineEchartxy'
import BarEchart from '@/components/chart/barEchart'
import CircleEchart from '@/components/chart/CircleEchart'
import PieEchart from '@/components/chart/PieEchart'
import IndexHeader from './IndexHeader'
import { httpAction, getAction } from '@/api/manage'
import { formatDateTime, formatDate } from './format'

export default {
  name: 'IndexChart',
  components: {
    IndexHeader,
    LineEchart,
    LineEchartxy,
    BarEchart,
    CircleEchart,
    PieEchart,
    ATooltip,
    ACol
  },
  data() {
    return {
      // 年度分析查询条件
      searchObj: {
        type: 'S', //类别
        year: '' //年份
      },
      // 头部时间
      currentDate: new Date(),
      // 头部时间定时器
      intelvalObj: null,
      // 年份时间选择框是否展示
      yearShowOne: false,
      loading: true,
      // 头部水统计
      sNum: {},
      // 头部电统计
      dNum: {},
      // 头部燃气统计
      rqNum: {},
      // 头部蒸汽统计
      zqNum: {},
      // 头部水分析对象
      sDataSource: {
        data: [],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      // 头部电分析对象
      dDataSource: {
        data: [],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      // 头部燃气分析对象
      rqDataSource: {
        data: [],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      // 头部蒸汽分析对象
      zqDataSource: {
        data: [],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      // 年度统计曲线分析对象
      YearEnergyObj: {
        data: [[], []],
        legend: ['能耗', '费用'],
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      // 电能源分析
      dAnalysis: [],
      // 蒸汽能源分析
      zqAnalysis: [],
      // 燃气能源分析
      rqAnalysis: [],
      // 水能源分析
      sAnalysis: []
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  mounted() {
    // 头部时间
    this.currentDate = formatDateTime(new Date())
    this.intelvalObj = setInterval(() => {
      this.currentDate = formatDateTime(new Date())
    }, 1000)
    this.load()
  },
  methods: {
    // 加载首页接口数据
    load() {
      this.loadTopList()
      this.loadYearEnergyConsumption()
      this.loadenergYanalysisChart()
    },
    // 头部水、电、燃气、蒸汽数据汇总及分析曲线图
    loadTopList() {
      getAction('/homePage/list', {}).then(res => {
        if (res.success) {
          console.log('res', res)
          this.sNum = res.result.sNum
          this.dNum = res.result.dNum
          this.rqNum = res.result.rqNum
          this.zqNum = res.result.zqNum
          this.sDataSource = {
            data: res.result.sNum.slaughterNumList,
            xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
          this.dDataSource = {
            data: res.result.dNum.slaughterNumList,
            xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
          this.rqDataSource = {
            data: res.result.rqNum.slaughterNumList,
            xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
          this.zqDataSource = {
            data: res.result.zqNum.slaughterNumList,
            xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 年度能耗分析曲线图
    loadYearEnergyConsumption() {
      getAction('/homePage/yearEnergyConsumption', { type: this.searchObj.type, year: (new Date(this.searchObj.year._d)).getFullYear() }).then(
        res => {
          if (res.success) {
            this.YearEnergyObj = {
              data: [res.result.fyList, res.result.nhList],
              legend: ['能耗', '费用'],
              xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
            }
          } else {
            this.YearEnergyObj = {
              data: [[], []],
              legend: ['能耗', '费用'],
              xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
            this.$message.warning(res.message)
          }
        }
      )
    },
    // 下部右侧水、电、燃气、蒸汽能源消耗数据加载
    loadenergYanalysisChart() {
      getAction('/homePage/energYanalysisChart').then(res => {
        if (res.success) {
          console.log(res, 'res')
          this.dAnalysis = res.result.dList
          this.sAnalysis = res.result.sList
          this.rqAnalysis = res.result.rqList
          this.zqAnalysis = res.result.zqList
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value, mode) {
      this.searchObj.year = value
      this.loadYearEnergyConsumption()
      this.yearShowOne = false
    }
  },
  beforeDestroy() {
    // 清楚时间定时器
    clearInterval(this.intelvalObj)
    this.intelvalObj = null
  }
}
</script>

<style lang="less" scoped>
.index-page {
  background: url('../../assets/images/index/u1.png') no-repeat;
  background-size: 100% 100%;
  height: 1030px;
  padding: 0 30px;
  position: relative;
  p {
    padding: 0;
    margin: 0;
  }
  .current-date {
    position: absolute;
    top: 80px;
    display: flex;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #ffffff;
    line-height: 29px;
    .current-date-icon {
      width: 29px;
      height: 29px;
      background: url('../../assets/images/index/u7.png') no-repeat;
      background-size: 100% 100%;
      margin-right: 12px;
    }
  }
  .index-top-item {
    background: #fff;
    height: 160px;
    padding: 20px 0 0 25px;
    box-sizing: border-box;
    .item-top {
      display: flex;
      .item-top-eve {
        width: 33%;
        .item-top-title {
          color: #aaa;
          font-size: 14px;
          font-family: '微软雅黑', sans-serif;
          font-weight: 400;
          color: #999999;
        }
        .item-top-num {
          .num {
            color: #444;
            font-size: 28px;
            font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
            font-weight: 700;
            color: #666666;
          }
          .pre {
            font-family: '微软雅黑', sans-serif;
            font-weight: 400;
            font-size: 12px;
            color: #19be6b;
          }
          .qushi {
          }
        }
      }
    }
    .item-bottom {
      width: 90%;
      height: 80px;
      margin-top: 10px;
    }
  }
  .index-top-item.red {
    border-left: 5px solid rgba(251, 98, 96, 1);
  }
  .index-top-item.blue {
    border-left: 5px solid rgba(0, 153, 255, 1);
  }
  .index-top-item.green {
    border-left: 5px solid rgba(81, 211, 81, 1);
  }
  .index-top-item.purple {
    border-left: 5px solid rgba(129, 103, 245, 1);
  }
  .index-content {
    margin-top: 78px;
    .index-content-left {
      height: 581px;
      background: url('../../assets/images/index/u11.png') no-repeat;
      background-size: 100%;
      position: relative;
      padding: 23px 0 0 15px !important;
      box-sizing: border-box;
      .content-left-title {
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        display: flex;
        align-items: center;
        margin-bottom: 50px;
        .left-title-icon {
          width: 14px;
          height: 15px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 12px;
        }
      }
      .content-left-search {
        position: absolute;
        top: 90px;
        right: 70px;
        display: flex;
        /deep/.ant-select {
          margin-right: 27px;
        }
        /deep/.ant-select-selection {
          width: 106px;
          height: 29px;
          background: inherit;
          background-color: rgba(19, 41, 89, 1);
          box-sizing: border-box;
          border: 1px solid rgba(6, 29, 74, 1);
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          color: #f0f7ff;
        }
        /deep/.ant-select-arrow {
          color: #fff;
        }
        /deep/.ant-calendar-picker {
          width: 112px;
          height: 29px;
          background: inherit;
          background-color: rgba(19, 41, 89, 1);
          box-sizing: border-box;
          border: 1px solid rgba(182, 215, 255, 1);
          border-radius: 6px;
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          font-family: 'Helvetica Neue ', 'Helvetica Neue', sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #f0f7ff;
          text-align: left;
        }
        /deep/.ant-input {
          background: transparent;
          border: none;
          height: 29px;
          line-height: 29px;
          color: #fff;
        }
        /deep/.ant-calendar-picker-icon {
          color: #fff;
        }
      }
    }
    .index-content-right {
      .content-right-item {
        height: 283px;
        box-sizing: border-box;
        box-shadow: none;
        border: 1px solid rgb(51, 51, 51);
        position: relative;
        padding: 20px 0 0 20px;
        margin-bottom: 13px;
        .left-top,
        .left-bottom,
        .right-top,
        .right-bottom {
          width: 20px;
          height: 20px;
          background-color: transparent;
          box-sizing: border-box;
          border: 4px solid rgba(89, 134, 223, 1);
          position: absolute;
        }
        .left-top {
          border-right: 0px;
          border-bottom: 0px;
          top: -2px;
          left: -2px;
        }
        .left-bottom {
          border-right: 0px;
          border-top: 0px;
          bottom: -2px;
          left: -2px;
        }
        .right-top {
          border-left: 0px;
          border-bottom: 0px;
          top: -2px;
          right: -2px;
        }
        .right-bottom {
          border-left: 0px;
          border-top: 0px;
          bottom: -2px;
          right: -2px;
        }
        .right-item-title {
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 20px;
          color: #557fb6;
        }
        .right-item-content {
          height: 233px;
        }
      }
    }
  }
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>